<template>
	<!-- 首页-候选阿姨 -->
	<view>
		<!-- <u-navbar back-icon-color="#000000" title="候选人" title-color="#3F3F3F" :title-bold="true" :background="background"></u-navbar> -->
		<u-navbar back-text="候选人" :back-text-style="textStyle" back-icon-color="#000000" style="font-weight: bold;font-family: PingFang SC;"></u-navbar>
		<view v-if="!isShow" style="margin-bottom: 150rpx;" :key="counts">
			<view class="bodyer_box" v-for="(item,index) in list" :key="index">
				<view class="check">
					<image @click="ischeckPage(item.candidateId)" v-if="selectList.indexOf(item.candidateId)!=-1" src="../../../../static/icon/gou.png" mode=""></image>
					<image @click="ischeckPage(item.candidateId)" v-else src="../../../../static/icon/nochecked.png" mode=""></image>
				</view>
				<!-- 内容 -->
				<view class="tables">
					<view style="border-bottom: 2rpx solid #DEDEDE;padding: 12rpx 14rpx;">
						<u-row>
							<u-col span="6"><text class="typeface4">{{item.enterpriseName}}</text></u-col>
							<u-col span="6" text-align="right">
								<text class="cancelButtom" @click.stop="updateCandidate(item,index)" v-if="item.choose">取消候选</text>
								<text class="joinButtom" @click.stop="updateCandidate(item,index)" v-else>加入候选</text>
							</u-col>
						</u-row>
					</view>

					<view style="margin: 18rpx 22rpx 10rpx 22rpx;">
						<u-row>
							<u-col span="3">
								<image :src="item.portrait" style="width: 140rpx;height: 222rpx;border-radius: 5rpx;margin-top: 20rpx;" mode="aspectFill"></image>
							</u-col>
							<u-col span="9">
								<view style="display: flex;flex-direction:row;">
									<view class="typeface5">{{item.name}}</view>
									<view class="labels">{{item.businessName}}</view>
									<!-- <view class="typeface6"><text>匹配度：</text><text>100%</text></view> -->
								</view>
								<view style="margin-top: 8rpx;">
									<text class="typeface7">{{item.score}}分</text>
									<!-- <u-rate :count="count" v-model="item.score" :disabled="true" active-color="#F29423" style="margin-left: 16rpx;"></u-rate> -->
								</view>
								<view class="typeface8" style="margin-top: 8rpx;">
									<view>{{item.age}}岁</view>
									<view>{{item.nativePlace}}人</view>
									<view>服务{{item.workExperience}}年</view>
									<view>{{item.education}}学历</view>
								</view>
								<view style="margin-top: 8rpx;display: flex; flex-wrap:wrap;height: 108rpx;">
									<view class="label" v-for="(items,indexs) in item.skills" :key="indexs" v-if="indexs<6">{{items}}</view>
								</view>
								<view class="typeface9" style="text-align: right;margin-top: 10rpx;margin-bottom: 20rpx;">{{item.price}}{{item.unit}}</view>
							</u-col>
						</u-row>
					</view>
				</view>
			</view>
		</view>
		
		<view v-if="isShow" style="margin-top: 100rpx;text-align: center;">
			<image src="../../../../static/img/1-40.png" style="width: 450rpx;height: 450rpx;"></image>
			<view class="typeface12">暂无候选人</view>
		</view>
		<view class="footer">
			<view class="footer_box">
				<view class="chec">
					<image @click="isallchecked" v-if="allchecked" src="../../../../static/icon/gou.png" mode=""></image>
					<image @click="isallchecked" v-else src="../../../../static/icon/nochecked.png" mode=""></image>
				</view>
				<view class="chectex">
					全选
				</view>
				<view class="numtex">
					已选{{selectList.length}}位阿姨
				</view>
				<view class="madeinfo">
					<view class="madeinfo_but" @click="subscribe">
						预约面试
					</view>
				</view>
			</view>
		</view>
		
		<!-- 绑定手机号 -->
		<u-modal v-model="phoneShow" :show-title="false" :show-confirm-button="false">
			<view>
				<view class="typeface13">
					暂未绑定手机号，绑定手机号后才可下单!
				</view>
				<view style="display: flex;justify-content:center;justify-content:space-between;">
					<view class="cancel" @click="phoneShow=false;">
						取消
					</view>
					<button
					class="bottom"
					 open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" lang="zh_CN" withCredentials="true">
						绑定手机号
					</button>
				</view>
			</view>
		</u-modal>
		
		<!-- 选择服务时间 -->
		<u-select style="line-height: 32rpx;width: 4%;" v-model="dateShow" title="选择服务时间" mode="mutil-column-auto" :list="listDate"
		 confirm-color="#FCC800" @confirm="getDefaultTime"></u-select>
		<u-toast ref="uToast"/>
	</view>
</template>

<script>
export default {
	data() {
		return {
			background:{
				backgroundColor: '#fca800',
			},
			allchecked:false,
			count:5,
			num:0,
			list: [],
			selectList:[],//选中list
			isShow:false,
			listDate:[],
			dateShow:false,
			
			phoneShow:false,//是否显示绑定手机号弹框
		};
	},
	onLoad() {
		this.getAuntCandidate();
		this.getDatas();
	},
	methods: {
		//绑定手机号事件
		getPhoneNumber(e) {
			var _this = this;
			if (e.detail.errMsg == 'getPhoneNumber:ok') {
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						var code = loginRes.code;
						let opts = {
							way: true, //true JSON请求；false 表单请求
							method: 'post',
							url: 'user/bind/phone'
						};
						let data = {
							encryptedData: e.detail.encryptedData,
							iv: e.detail.iv,
							code: code
						};
						_this.http.httpTokenRequest(opts, data).then(res => {
							//打印请求返回的数据
							if (res.code == 200) {
								
								uni.setStorageSync('isBindPhone', true);
								_this.phoneShow=false;
							} else {
								_this.phoneShow=false;
								_this.$refs.uToast.show({
									title: res.message,
									type: 'error'
								})
							}
						});
					}
				});
			} else {
				_this.phoneShow=false;
				console.log('用户点击了拒绝');
			}
		},
		//修改候选状态
		updateCandidate:function(item,index){
			//true:候选中   false:未候选
			if(item.choose){
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'user-candidate/cancel',
				};
				let data = {
					candidateId:item.candidateId
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code=="200"){
						this.list[index].choose=false;
						this.getAuntCandidate();
						this.counts+=1;
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				});
			}else{
				let opts = {
					way: true, //true JSON请求；false 表单请求
					method: 'post',
					url: 'user-candidate/add',
				};
				let data = {
					employeeId:item.employeeId,
					businessId:this.redirectId
				};
				this.http.httpTokenRequest(opts, data).then(res => {
					if(res.code=="200"){
						this.list[index].choose=true;
						this.getAuntCandidate();
						this.counts+=1;
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error'
						})
					}
				});
			}
		},
		//获取所有候选阿姨
		getAuntCandidate:function(){
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'employee/myChoose',
			};
			let data = {};
			this.http.httpTokenRequest(opts, data).then(res => {
				if(res.code=="200"){
					if(res.data.length>0){
						this.list=res.data;
						this.isShow=false;
					}else{
						this.isShow=true;
					}
					
				} else {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					})
				}
			});
		},
		//全选操作
		isallchecked(){
			if(this.allchecked){
				this.selectList=[];
				this.allchecked=false;
			}else{
				this.list.forEach((item)=>{
					this.selectList.push(item.candidateId);
				});
				this.allchecked=true;
			}
		},
		//点击选中或取消选中
		ischeckPage(index){
			if (this.selectList.indexOf(index) != -1) {
				for (let i = 0; i < this.selectList.length; i++) {
					if (index == this.selectList[i]) {
						this.selectList.splice(i, 1);
					}
				}
			} else {
				this.selectList.push(index);
			}
			
			if(this.selectList.length==this.list.length){
				this.allchecked=true;
			}else{
				this.allchecked=false;
			}
		},
		//确认预约
		subscribe:function(){
			let falg=true;
			if(this.selectList.length<=0){
				this.$refs.uToast.show({
					title: '预约候选人不能为空！',
					type: 'default'
				})
				return falg=false;
			}
			if(this.selectList.length>6){
				this.$refs.uToast.show({
					title: '预约候选人一次不能超过5人！',
					type: 'default'
				})
				return falg=false;
			}
			
			if(falg){
				this.dateShow=true;
			}
		},
		// 请选择时间
		getDatas() {
			var arr = [];
			var _this = this;
			var date = new Date();
			var month=(date.getMonth() + 1)>9?(date.getMonth() + 1):'0'+(date.getMonth() + 1);
			var day=date.getDate()>9?date.getDate():'0'+date.getDate();
			var showDate = date.getFullYear() + '-' + month + '-' + day;
			var nextData = '';
			for (var i = 1; i <= 6; i++) {
				//后7天
				date.setDate(date.getDate() + 1);
				var months=(date.getMonth() + 1)>9?(date.getMonth() + 1):'0'+(date.getMonth() + 1);
				var day=date.getDate()>9?date.getDate():'0'+date.getDate();
				nextData = date.getFullYear() + '-' + months + '-' + day;
				arr.push({
					value: i + 1,
					label: nextData
				});
			}
			var datas = [{
					value: 1,
					label: '07:00'
				},
				{
					value: 2,
					label: '08:00'
				},
				{
					value: 3,
					label: '09:00'
				},
		
				{
					value: 4,
					label: '10:00'
				},
				{
					value: 5,
					label: '11:00'
				},
				{
					value: 6,
					label: '12:00'
				},
				{
					value: 7,
					label: '13:00'
				},
				{
					value: 8,
					label: '14:00'
				},
		
				{
					value: 9,
					label: '15:00'
				},
				{
					value: 10,
					label: '16:00'
				},
				{
					value: 11,
					label: '17:00'
				},
				{
					value: 12,
					label: '18:00'
				},
				{
					value: 13,
					label: '19:00'
				}
			];
			var nowtime = date.getHours();
			var indexs = null;
			datas.forEach((item, index) => {
				var tex = parseInt(item.label.substring(0, 2));
				if (parseInt(item.label.substring(0, 2)) == nowtime) {
					indexs = index;
				}
			});
			this.arrayInex = datas.splice(0, indexs + 1);
			var items = [];
			if(19>nowtime){
				items.push({
					value: 1,
					label: showDate
				});
			}
			items = items.concat(arr);
			items.forEach((item, index) => {
				console.log()
				if (index == 0&&datas.length>0) {
					item.children = datas;
				} else {
					item.children = [{
							value: 1,
							label: '07:00'
						},
						{
							value: 2,
							label: '08:00'
						},
						{
							value: 3,
							label: '09:00'
						},
		
						{
							value: 4,
							label: '10:00'
						},
						{
							value: 5,
							label: '11:00'
						},
						{
							value: 6,
							label: '12:00'
						},
						{
							value: 7,
							label: '13:00'
						},
						{
							value: 8,
							label: '14:00'
						},
		
						{
							value: 9,
							label: '15:00'
						},
						{
							value: 10,
							label: '16:00'
						},
						{
							value: 11,
							label: '17:00'
						},
						{
							value: 12,
							label: '18:00'
						},
						{
							value: 13,
							label: '19:00'
						}
					];
				}
		
			});
			this.listDate = items;
		},
		//确认下单
		getDefaultTime: function(val) {
			console.log(val);
			let opts = {
				way: true, //true JSON请求；false 表单请求
				method: 'post',
				url: 'orders/create/month/batch',
			};
			let data = {
				candidateIds: this.selectList,
				interviewTime: val[0].label+" "+ val[1].label
			};
			this.http.httpTokenRequest(opts, data).then(res => {
				if (res.code == "200") {
					this.$refs.uToast.show({
						title: res.message,
						type: 'success'
					})
					uni.redirectTo({
						url: '../../../service/orderSuccess?orderId=' + res.data+'&type=2'
					})
				}  else if(res.code == "1013"){
						this.phoneShow=true;
				}else  {
					this.$refs.uToast.show({
						title: res.message,
						type: 'error'
					})
					uni.redirectTo({
						url: '../../../service/orderFail'
					})
				}
			});
		}
	}
};
</script>

<style>
.cancel{
	margin: 20rpx 0rpx 32rpx 0rpx;
	padding: 0rpx 106rpx 0rpx 84rpx;
	border-right:2rpx solid #B8B7B7;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #979797;
	opacity: 1;
}
button::after { border: none }
.bottom{
	background-color: #fff;
	border: 1rpx solid #FFFFFF;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #FCA800;
	opacity: 1;
}
.typeface13{
	text-align: center;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 500;
	color: #666666;
	opacity: 1;
	padding: 56rpx 152rpx 56rpx 134rpx;
	
}
.typeface11 {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #fca800;
	opacity: 1;
}
.tables {
	margin-left: 4rpx;
	margin-top: 24rpx;
	width: 660rpx;
	background: #ffffff;
	box-shadow: 0rpx 6rpx 12rpx rgba(0, 0, 0, 0.16);
	opacity: 1;
	border-radius: 10rpx;
}
.typeface4 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #656565;
	opacity: 1;
}
.cancelButtom {
	text-align: center;
	background: #fca800;
	border-radius: 10rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 42rpx;
	color: #ffffff;
	opacity: 1;
	padding: 4rpx 12rpx;
}
.typeface5 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #656565;
	opacity: 1;
}
.typeface6 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #f86565;
	opacity: 1;
}
.typeface7 {
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #f29423;background-color: #FFF6EB;padding: 2rpx 10rpx;border-radius: 20rpx;
	opacity: 1;
}
.typeface8 {
	display: flex; 
	flex-wrap:wrap;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #3f3f3f;
	opacity: 1;
}
.typeface8 view{
	width: 105rpx;
	margin-right: 5rpx;	
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	word-break: break-all;
}
.typeface9 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #f29423;
	opacity: 1;
}
.label {
	margin-top: 12rpx;
	margin-left: 10rpx;
	/* width: 106rpx; */
	height: 42rpx;
	background: #F4F6F5;
	/* border: 2rpx solid #f29423; */
	opacity: 1;
	border-radius: 10rpx;
	text-align: center;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	line-height: 42rpx;
	color: #B0B5B8;
	padding: 0 10rpx;
	opacity: 1;
}
.joinButtom {
	border: 2rpx solid #f29423;
	opacity: 1;
	border-radius: 10rpx;
	text-align: center;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #f29423;
	opacity: 1;
	padding: 4rpx 12rpx;
}
.typeface10 {
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #858585;
	opacity: 1;
}
.typeface11 {
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #fca800;
	opacity: 1;
}
.bodyer_box{
	display: flex;
}
.check{
	width: 10%;
	text-align: right;
	display: flex; 
	justify-content: center; 
	align-items: center;
	
}
.check image{
	width: 34rpx;
	height: 34rpx;
}
.tables{
	/* width: 94%; */
}
.footer{
	width: 100%;
	height: 100rpx;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	left: 0;
	/* border-top:1rpx solid #DEDEDE; */
}
.footer_box{
	width: 100%;
	display: flex;
	line-height: 100rpx;
}
.chec{
	width: 12%;
	text-align: right;
	padding-right: 10rpx;
	text-align: right;
	/* display: flex; */
	justify-content: center; 
	align-items: center;
}
.chec image{
	vertical-align: middle;
	width: 34rpx;
	height: 34rpx;
}
.chectex{
	vertical-align: middle;
	width: 15%;
	color: #666666;
}
.numtex{
	width:28%;
	letter-spacing: 2rpx;
	color: #F29423;
}
.madeinfo{
	width: 45%;
	line-height: 100rpx;
	text-align: right;
	display: flex; 
	justify-content: center; 
	align-items: center;
}
.madeinfo .madeinfo_but{
	width: 240rpx;
	color: #fff;
	padding: 10rpx 40rpx;
	background-color: #FCA800;
	font-size: 34rpx;
	border-radius: 40rpx;
	height: 72rpx;
	line-break: ;
	line-height: 72rpx;
	text-align: center;
	padding: 0 20rpx;

}
.typeface12{
	margin-top: 10rpx;
	font-size: 30rpx;
	font-family: PingFang SC;
	font-weight: bold;
	color: #666666;
	opacity: 1;
}
.labels{
	margin-left: 14rpx;
	background: #FFFFFF;
	border: 2rpx solid #FCA800;
	opacity: 1;
	padding: 0rpx 10rpx;
	border-radius: 20rpx;
	font-size: 26rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FCA800;
	opacity: 1;
}
</style>
